<template>
  <view class="index-wraps">
    <!-- <text class="index-grid-title" @tap="goPay">支付支付支付</text> -->
    <view class="custom-swiper"
      ><u-swiper
        class="custom-swiper"
        :list="bannerArr"
        indicator
        :indicator-mode="'number'"
        :indicator-color="'#ffffff'"
        :indicator-active-color="'#007aff'"
      ></u-swiper>
    </view>
    <view class="index-wrap">
      <!-- 活动视频   -->
      <view class="index-ticket-wrap">
        <view class="index-title-wrap">
          <view class="index-line"></view>
          <text class="index-title">热门视频</text>
        </view>
        <view class="index-grid-wrap">
          <view class="index-content-item" @tap="handleShowVideo">
            <image
              src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"
            />
            <text class="index-grid-title">视频</text>
          </view>
          <view class="index-content-item" @tap="handleShowVideo">
            <image
              src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"
            />
            <text class="index-grid-title">视频2</text>
          </view>
          <view class="index-content-item" @tap="handleShowVideo">
            <image
              src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"
            />
            <text class="index-grid-title">视频3</text>
          </view>
        </view>
      </view>

      <!-- 泳票   -->
      <!-- <view class="index-ticket-wrap">
        <view class="index-title-wrap">
          <view class="index-line"></view>
          <text class="index-title">泳票</text>
        </view>
        <view class="index-title-icon-wrap">
          <view
            v-for="(item, index) in iconArr"
            :key="index"
            :class="[
              'index-title-icon-item',
              activeIndex === index + 1 ? 'index-title-icon-item-active' : '',
            ]"
            @tap="handleIcon(item, index)"
          >
            <view class="index-title-icon">
              <image class="index-title-icons" :src="item.img"></image>
            </view>
            <view class="index-title-icon-txt">{{ item.txt }}</view>
          </view>
        </view> -->

        <!-- 泳票列表 -->
         <view class="index-ticket-wrap">
        <view class="index-title-wrap">
          <view class="index-line"></view>
          <text class="index-title">泳票</text>
        </view>
        <view class="index-buy-ticket-wrap">
          <view
            class="index-buy-ticket-item"
            v-for="(item, index) in titckArr"
            :key="index"
          >
            <view class="index-buy-left">
              <image
                src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"
              />
            </view>
            <view class="index-buy-content">
              <view class="index-buy-title">{{ item.title }}</view>
              <view class="index-buy-desc">{{ item.desc }}</view>
              <view class="index-buy-price">
                <text>{{ item.price }}</text>
                <text class="index-unit">元</text>
              </view>
            </view>
            <view class="index-buy-btn">
              <view class="index-btn" @tap="handleBuy">购买</view>
            </view>
          </view>
        </view>
        </view>
        
      </view>

      <!-- 场馆列表   -->
      <view class="index-ticket-wrap">
        <view class="index-title-wrap">
          <view class="index-line"></view>
          <text class="index-title">场馆</text>
        </view>
        <view class="index-buy-ticket-wrap">
          <view
            class="index-buy-ticket-item index-venue-item"
            v-for="(item, index) in siteArr"
            :key="index"
          >
            <view class="index-buy-left">
              <image
                src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"
              />
            </view>
            <view class="index-buy-content">
              <view class="index-buy-title">{{ item.title }}</view>
              <view class="index-buy-desc">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 视频弹窗     -->
      <view class="h-dialog" v-if="videoShow">
        <view class="h-dialog-mask"></view>
        <view class="h-dialog-content">
          <view class="h-close" @tap="handleCloseVideo">X</view>
          <video
            class="index-video"
            id="video"
            src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
            initial-time="0"
            :controls="true"
            :autoplay="false"
            :loop="false"
            :muted="false"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//https://blog.csdn.net/m0_74132533/article/details/129426308
import { request, requestData } from '@/utils/http.js'

export default {
  data() {
    return {
      bannerArr: [
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
      ],
      // iconArr: [
      //   {
      //     img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
      //     txt: '全部',
      //   },
      //   {
      //     img: 'https://ya30images.hbwlife.com/wxmpadmin/onceCard_2.png',
      //     txt: '月卡',
      //   },
      //   {
      //     img: 'https://ya30images.hbwlife.com/wxmpadmin/yearCard_2.png',
      //     txt: '年卡',
      //   },
      // ],
      titckArr: [
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '一次卡',
          desc: '此卡的内容描述',
          price: '59',
        },
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '一次卡',
          desc: '此卡的内容描述',
          price: '59',
        },
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '一次卡',
          desc: '此卡的内容描述',
          price: '59',
        },
      ],
      siteArr: [
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '场馆1',
          desc: '场馆的内容描述',
        },
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '场馆1',
          desc: '场馆的内容描述',
        },
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '场馆1',
          desc: '场馆的内容描述',
        },
        {
          img: 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
          title: '场馆1',
          desc: '场馆的内容描述',
        },
      ],
      videoShow: false,
      activeIndex: 1,
    }
  },
  mounted() {},
  methods: {
    handleShowVideo() {
      this.videoShow = true
    },
    handleCloseVideo() {
      this.videoShow = false
    },
    handleBuy() {
      uni.navigateTo({
        url: '/pagesB/studentManageDetail/studentManageDetail',
      })
    },
    handleIcon(item, index) {
      console.log(index)
      this.activeIndex = index + 1
      if (index == 0) {
        item.img = 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png'
      } else if (index == 1) {
        item.img = 'https://ya30images.hbwlife.com/wxmpadmin/onceCard_1.png'
      } else if (index == 2) {
        item.img = 'https://ya30images.hbwlife.com/wxmpadmin/yearCard_1.png'
      }
    },
    // goPay() {
    // 	uni.navigateTo({
    // 		url: "/pages/test/test",
    // 	});
    // }
  },
}
</script>

<style lang="scss" scoped>
.index-wraps {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: linear-gradient(#fdfcf5, #fff);
}

.custom-swiper {
  height: 420rpx !important;
}

/* 更改u-swiper样式 */
::v-deep .u-swiper {
  height: 410rpx !important;
}

::v-deep .u-swiper__wrapper.data-v-6b019429 {
  height: 405rpx !important;
}

::v-deep .u-swiper__wrapper__item__wrapper__image.data-v-6b019429 {
  height: 403rpx !important;
}

::v-deep .u-swiper__indicator {
  bottom: 20px !important; /* 调整位置 */
}
::v-deep .u-swiper__indicator-dot {
  width: 8px; /* 圆点大小 */
  height: 8px !important; /* 圆点大小 */
}

.index-ticket-wrap {
  width: 100%;
  height: auto;
  min-height: 200rpx;
  box-sizing: border-box;
  padding: 20rpx;
  background: $global-background-grey;
}

.index-title-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.index-line {
  width: 6rpx;
  height: 30rpx;
  background-color: $global-color-golden;
  border-radius: 2px;
  box-sizing: border-box;
}

.index-title {
  // font-weight: bold;
  color: $global-title-color-bold;
  font-size: 32rpx;
  margin-left: 22rpx;
  box-sizing: border-box;
}

.index-title-icon-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;
  box-sizing: border-box;
  background: #fff;
  padding: 20rpx;
}

.index-title-icon-item {
  width: 93rpx;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}

.index-title-icon {
  width: 93rpx;
  height: 93rpx;
  background-color: #fdfbeb;
  border-radius: 50%;
  font-size: 28rpx;
  color: $global-color-golden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.index-title-icon-item-active .index-title-icon {
  background-color: $global-color-golden;
  color: #fff;
  box-sizing: border-box;
}

.index-title-icons {
  width: 64rpx;
  height: 64rpx;
}

.index-title-icon-txt {
  margin-top: 24rpx;
  color: #010101;
  font-size: 28rpx;
  box-sizing: border-box;
}

.index-buy-ticket-wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 34rpx;
  margin-top: 20rpx;
}

.index-buy-ticket-item {
  width: 100%;
  height: auto;
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  background: #fff;
}

.index-buy-left {
  width: 148rpx;
  height: auto;
}

.index-buy-left image {
  width: 148rpx;
  height: 148rpx;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 12rpx;
}

.index-buy-content {
  box-sizing: border-box;
  flex: 1;
  padding: 0 23rpx;
}

.index-buy-title {
  font-size: 28rpx;
  color: $global-title-color-bold;
  box-sizing: border-box;
}

.index-buy-desc {
  color: $uni-text-color-grey;
  font-size: 24rpx;
  margin-top: 8rpx;
  box-sizing: border-box;
}

.index-buy-price {
  margin-top: 8rpx;
  color: #dd524d;
  box-sizing: border-box;
}

.index-buy-btn {
  width: 133rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-btn {
  width: 133rpx;
  height: 55rpx;
  border-radius: 27.5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
  background: $global-color-golden;
  box-sizing: border-box;
}

.index-venue-item {
  align-items: flex-start;
}

.index-grid-wrap {
  width: 100%;
  height: auto;
  display: grid;
  gap: 20rpx;
  grid-template-columns: 1fr 1fr 1fr;
  /* 两列，每列宽度相等 */
  grid-template-rows: auto;
  /* 自动高度 */
  margin-top: 20rpx;
}

.index-content-item {
  width: 1fr;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.index-content-item image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.index-grid-title {
  color: #010101;
  font-size: 28rpx;
  margin-top: 10rpx;
  font-weight: 500;
}

.h-dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

.h-dialog-mask {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100vh;
}

.h-close {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  font-size: 28rpx;
  color: #010101;
  border-radius: 50%;
  background-color: #fff;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 9999;
}

.index-video {
  width: 100%;
  height: 350rpx;
}

.h-dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  min-height: 350rpx;
  height: auto;
}

.index-venue-item .index-buy-left {
  width: 240rpx;
}

.index-venue-item .index-buy-left image {
  width: 240rpx;
}
</style>
